<template>
  <view class="tabs trend-chart">
    <!-- <uni-popup ref="popup" type="dialog">
      <number-modal
        :defaultNumbers="[]"
        @search="onNumbersChange"
        @close="onCloseNumberModal"
      ></number-modal>
    </uni-popup> -->
    <view class="title-padding"></view>
    <view class="trend-chart-header">
      <view class="trend-chart-header-left">
        <button
          class="button text-white"
          v-if="tabIndex === 0"
          @tap="onSubmitToNumbers"
        >
          提交
        </button>
      </view>
      <view class="trend-chart-header-right">
        <view class="text-container">
          <!-- <text class="caipiao-name">{{ caipiao_name }}</text> -->
          <!-- <text class="qishu">{{ qishu }}期({{ list.length }})</text> -->
          <view class="desc-container">
            <!-- <button class="button text-white" @tap="handleRefresh">
              刷新
            </button> -->
            <picker
              @change="onCateChange2"
              :value="cateChooseList2"
              :range="cpCategoryList2"
              range-key="name"
            >
              <view class="flex align-center">
                <view>
                  {{ cpCategoryList2[cateChooseList2].name }}
                </view>
                <view class="picker-suffix-icon">
                  <image mode="widthFix" src="../../static/form/choose.png" />
                </view>
              </view>
            </picker>
          </view>
        </view>
      </view>
    </view>
    <view id="tab-bar" class="scroll-h tab-bar">
      <view
        v-for="(tab, index) in tabBars"
        :key="tab.id"
        class="uni-tab-item"
        :id="tab.id"
        :data-current="index"
        @click="ontabtap"
        :class="tabIndex == index ? 'uni-tab-item-active' : ''"
      >
        <text class="uni-tab-item-title">
          {{ tab.name }}
        </text>
      </view>
      <view class="count-down">
        <view class="icon"></view>
        <text class="text">{{ timeText }}</text>
      </view>
    </view>
    <view class="line-h"></view>
    <swiper
      :current="tabIndex"
      class="swiper-box has-pre-row"
      :duration="300"
      @change="ontabchange"
      v-if="list.length"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="trend-chart-content">
          <view class="trend-chart-content-header line-bottom">
            <view class="trend-chart-content-header-left both-middle">
              <!-- <view class="prize-number-title-padding"></view> -->
              <view class="text-blue">
                <text>期号</text>
              </view>
            </view>
            <view class="trend-chart-content-header-right">
              <view
                class="trend-chart-content-header-right-top text-blue line-bottom level-group"
              >
                <view
                  class="both-middle level-group-item"
                  v-for="(titleItem, idx1) in item.titleGroupList"
                  :key="idx1"
                >
                  <text>{{ titleItem.name }}</text>
                </view>
              </view>
              <view class="trend-chart-content-header-right-bottom level-group">
                <view
                  class="level-group-item"
                  v-for="(titleItem, idx2) in item.titleGroupList"
                  :key="idx2"
                >
                  <view
                    class="trend-chart-clock"
                    v-for="(num, index) in titleItem.list.length"
                    :key="index"
                    :class="index % 2 === 0 ? 'odd' : 'even'"
                  >
                    {{
                      titleItem.desc === 'number-distribution'
                        ? paddingZero(num)
                        : paddingZero(index)
                    }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="trend-chart-content-scroll-region">
            <!-- <uni-load-more class="load-more" :status="status"  :icon-size="16" :contentText="contentText" :iconType="circle" /> -->
            <!-- :scroll-into-view="viewId" -->
            <scroll-view
              class="scroll-v list"
              scroll-y
              :scroll-top="scrollTop"
              @scrolltoupper="loadMore(tabIndex)"
            >
              <!-- 暂时性方案待研究 -->
              <view class="no-more" v-if="maxLength === item.content.length">
                <text class="no-more-text">没有更多数据了</text>
              </view>
              <!-- <uLi-load-more
                status="noMore"
                v-if="maxLength === item.content.length"
              ></uLi-load-more> -->
              <uLi-load-more
                status="loading"
                v-if="isShowLoading"
              ></uLi-load-more>
              <view
                class="scroll-region-item line-bottom"
                :id="'line-' + lineItem.id"
                v-for="(lineItem, idx1) in item.content"
                :key="idx1"
              >
                <view class="scroll-region-item-left both-middle">
                  {{ lineItem.qihao }}
                </view>
                <view class="scroll-region-item-right level-group">
                  <view
                    class="level-group-item"
                    v-for="(contentGroup, index) in lineItem.contentGroupList"
                    :key="index"
                  >
                    <view
                      class="trend-chart-clock text-gray"
                      v-for="(content, index) in contentGroup.list"
                      :key="index"
                      :class="[
                        contentGroup.name,
                        content.selected ? 'select' : '',
                        index % 2 === 0 ? 'even' : 'odd',
                      ]"
                    >
                      <text class="text">
                        {{ content.value }}
                      </text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="bottom-view" id="bottom"></view>
            </scroll-view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="preselection-container">
      <text class="text">
        选号
      </text>
      <view class="circle-list">
        <view
          v-for="(circleStatus, index) in preselectionStatusList"
          :key="index"
          class="circle"
          :class="[circleStatus ? 'selected' : '']"
          @click="handleSelectPreselection(index)"
        >
          {{ paddingZero(index + 1) }}
        </view>
      </view>
    </view>

    <!-- <uLi-load-more status="loading" class="refresh-loading" v-if="isShowRrefreshLoading"></uLi-load-more> -->
  </view>
</template>

<script>
import { getTrendChart, getNextKj } from '@/api/trend-chart'
import { getCaipiaoCategoryList } from '@/api/common'
import NumberModal from '@/components/filterModal/zuhaoModal.vue'
import uLiLoadMore from '@/uni-components/uni-load-more/uni-load-more.vue'
// 缓存每页最多
const MAX_CACHE_DATA = 100
// 缓存页标签数量
const MAX_CACHE_PAGE = 3

const PAGE_SIZE = 20

export default {
  components: {
    NumberModal,
    uLiLoadMore,
  },
  computed: {
    timeText() {
      return `${this.paddingZero(
        Math.floor(this.time / 60)
      )}:${this.paddingZero(this.time % 60)}`
    },
  },
  data() {
    return {
      scrollTop: 0,
      viewId: '',
      isShowRrefreshLoading: false,
      triggered: true,
      originData: [],
      maxLength: 0,
      defaultNumbers: [],
      caipiao_id: '',
      qishu: 0,
      caipiao_name: '',
      list: [],
      cacheTab: [],
      tabIndex: 0,
      tabBars: [
        {
          name: '号码分布',
          id: 'number-distribution',
        },
        {
          name: '大数/连号',
          id: 'decimal/lian-number',
        },
        {
          name: '奇数/合数',
          id: 'odd-number/sum',
        },
      ],
      scrollInto: '',
      preselectionStatusList: new Array(11).fill(false),
      cateChooseList: [0, 0],
      cateChooseList2: 0,
      cpCategoryList: [
        [
          {
            name: '江苏',
            id: '1',
          },
        ],
        [
          {
            name: '50期',
            id: 50,
          },
        ],
      ],
      cpCategoryList2: [
        {
          name: '江苏',
          id: '1',
        },
      ],
      time: 1200,
      timer: null,
      isNeedScrollBottom: false,
      isShowLoading: false,
      firstRender: true,
    }
  },
  onLoad() {
    console.log('----- onLoad -----')

    this.getCateList().then(() => {
      this.requestData({
        caipiao_id: this.caipiao_id,
        qishu: this.qishu,
      })
      this.firstRender = false
    })
  },
  onShow() {
    if (this.firstRender) {
      return
    }

    console.log('----- onShow -----')

    this.requestData({
      caipiao_id: this.caipiao_id,
      qishu: this.qishu,
    })
  },
  methods: {
    handleRefresh() {
      if (this.isShowRrefreshLoading) return
      this.isShowRrefreshLoading = true
      uni.showToast({
        title: '正在刷新中',
        duration: 2000,
        icon: 'loading',
      })
      const timer = setTimeout(() => {
        this.isShowRrefreshLoading = false
        this.requestData({
          caipiao_id: this.caipiao_id,
          qishu: this.qishu,
        })
        clearTimeout(timer)
      }, 1000)
    },
    onRestore() {
      this.triggered = 'restore' // 需要重置
    },
    loadMore() {
      console.log(`- loadmore ${this.tabIndex}`)
      this.getList(this.tabIndex)
    },
    onSubmitToNumbers() {
      console.log(this.preselectionStatusList)
      let numbers = this.preselectionStatusList
        .map((item, index) => {
          if (item) {
            return index + 1
          } else {
            return null
          }
        })
        .filter(e => typeof e === 'number')
      console.log(numbers)
      if (numbers && numbers.length > 0) {
        uni.setStorageSync('from', 'chart')
        uni.setStorage({
          key: 'chartNumbers',
          data: JSON.stringify(numbers),
          success: () => {
            uni.switchTab({
              url: '/pages/number/index',
            })
          },
        })
      } else {
        uni.showToast({
          title: '未选择任何号码！',
          icon: 'none',
        })
      }
    },
    onNumbersChange(numbers) {
      if (numbers && numbers.length > 0) {
        this.onCloseNumberModal()
        uni.setStorageSync('from', 'chart')
        uni.setStorage({
          key: 'chartNumbers',
          data: JSON.stringify(numbers),
          success: () => {
            uni.switchTab({
              url: '/pages/number/index',
            })
          },
        })
      } else {
        uni.showToast({
          title: '未选择任何号码！',
          icon: 'none',
        })
        this.onOpenNumberModal()
      }
    },
    clearTimeout() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    initTimer() {
      this.timer = setInterval(() => {
        const time = this.time - 1
        if (time === -1) {
          this.time = 0
          this.requestData({ caipiao_id: this.caipiao_id, qishu: this.qishu })
        } else {
          this.time = time
        }
      }, 1000)
    },
    requestData({ caipiao_id = 0, qishu = 0 } = {}) {
      return new Promise((resolve, reject) => {
        getTrendChart({ caipiao_id, qishu }).then(
          ({ data: { caipiao_name, qishu, list } }) => {
            this.caipiao_name = caipiao_name
            this.qishu = qishu

            this.originData = Array.from({
              ...list,
              length: Object.keys(list).length,
            })
              .reverse()
              .map(item => {
                const hHmList = []
                const hOddList = []
                const hBigList = []
                const hLianList = []
                const hCompositeList = []
                Object.keys(item).forEach(key => {
                  const reg = /^h_([a-z]+)_(\d+)/g
                  const match = reg.exec(key)
                  if (match) {
                    const result = {
                      key,
                      value: item[key] !== 0 ? item[key] : Number(match[2]),
                      selected: item[key] === 0,
                    }
                    switch (match[1]) {
                      case 'hm':
                        hHmList.push(result)
                        break
                      case 'odd':
                        hOddList.push(result)
                        break
                      case 'big':
                        hBigList.push(result)
                        break
                      case 'lianhao':
                        hLianList.push(result)
                        break
                      case 'composite':
                        hCompositeList.push(result)
                        break
                    }
                  }
                })

                return {
                  h_id: item.h_id,
                  h_qihao: item.h_qihao,
                  hHmList,
                  hOddList,
                  hBigList,
                  hLianList,
                  hCompositeList,
                }
              })

            this.maxLength = this.originData.length
            const [first] = this.originData
            const {
              h_id,
              h_qihao,
              hHmList,
              hOddList,
              hBigList,
              hLianList,
              hCompositeList,
            } = first

            this.list = [
              {
                titleGroupList: [
                  {
                    desc: 'number-distribution',
                    name: '号码分布',
                    list: new Array(hHmList.length),
                  },
                ],
                content: [],
                isLoading: false,
                refreshText: '',
                loadingText: '加载更多...',
              },
              {
                titleGroupList: [
                  {
                    desc: 'decimal',
                    name: '大数',
                    list: new Array(hBigList.length),
                  },
                  {
                    desc: 'lian-number',
                    name: '连号',
                    list: new Array(hLianList.length),
                  },
                ],
                content: [],
                isLoading: false,
                refreshText: '',
                loadingText: '加载更多...',
              },
              {
                titleGroupList: [
                  {
                    desc: 'odd-number',
                    name: '奇数',
                    list: new Array(hOddList.length),
                  },
                  {
                    desc: 'sum',
                    name: '合数',
                    list: new Array(hCompositeList.length),
                  },
                ],
                content: [],
                isLoading: false,
                refreshText: '',
                loadingText: '加载更多...',
              },
            ]

            this.getList(this.tabIndex)

            console.log('this.list', this.list)

            getNextKj({ caipiao_id }).then(({ data: { next_timestamp } }) => {
              const curernt = +new Date()
              const diff = 30 // 延迟时间
              this.time =
                Math.ceil((next_timestamp * 1000 - curernt) / 1000) + diff
              this.clearTimeout()
              this.initTimer()
              resolve()
            })
          }
        )
      })
    },
    // scrollBottom(index) {
    //   this.viewId = `bottom`
    // },
    getList(index) {
      let _this = this
      const activeTab = this.list[index]
      if (activeTab.isLoading) return

      const originData = this.originData
      const maxLength = originData.length
      const currentLength = activeTab.content.length

      if (currentLength < maxLength) {
        // 还每加载完
        activeTab.isLoading = true
        this.isShowLoading = true
        const timer = setTimeout(() => {
          const list = []
          for (
            let i = maxLength - currentLength - 1;
            i > maxLength - (currentLength + PAGE_SIZE) - 1;
            i--
          ) {
            if (!originData[i]) break

            const {
              h_id,
              h_qihao,
              hHmList,
              hOddList,
              hBigList,
              hLianList,
              hCompositeList,
            } = originData[i]
            switch (index) {
              case 0:
                list.unshift({
                  qihao: h_qihao,
                  id: h_id,
                  contentGroupList: [
                    {
                      name: 'h-hm',
                      list: hHmList,
                    },
                  ],
                })
                break
              case 1:
                list.unshift({
                  qihao: h_qihao,
                  id: h_id,
                  contentGroupList: [
                    {
                      name: 'h-big',
                      list: hBigList,
                    },
                    {
                      name: 'h-lian',
                      list: hLianList,
                    },
                  ],
                })
                break
              case 2:
                list.unshift({
                  qihao: h_qihao,
                  id: h_id,
                  contentGroupList: [
                    {
                      name: 'h-odd',
                      list: hOddList,
                    },
                    {
                      name: 'h-composite',
                      list: hCompositeList,
                    },
                  ],
                })
                break
            }
          }

          let selector = ''
          if (currentLength > 0) {
            // 非第一页，则取历史消息数据的第一条信息元素
            selector = `#line-${activeTab.content[0].id}`
            // console.log(`- 1: `, selector)
          } else {
            // 第一页，则取当前消息数据的最后一条信息元素
            selector = `bottom`
          }

          activeTab.content = [...list, ...activeTab.content]
          activeTab.isLoading = false
          this.isShowLoading = false
          clearTimeout(timer)
          if (currentLength > 0) {
            this.$nextTick(() => {
              // console.log(`- 2: `, selector)
              _this.scrollTop = 20 * 29
              // _this.viewId = selector
              // _this.setPageScrollTo(selector)
            })
          } else {
            this.$nextTick(() => {
              // console.log(`- 2: `, selector)
              _this.scrollTop = (20 - 17) * 29
              // _this.viewId = selector
            })
          }
          // attention 下面这个数字时间不能小于1000， 至于为啥我也不知道
        }, 1200)
      }
    },
    // 设置页面滚动位置  -无用
    setPageScrollTo(selector) {
      let view = uni.createSelectorQuery().in(this).select(selector)
      view
        .boundingClientRect(res => {
          uni.pageScrollTo({
            scrollTop: res.top, // -30 为多显示出大半个消息的高度，示意上面还有信息。
            duration: 10000,
          })
        })
        .exec()
    },
    paddingZero(number) {
      return String(number).padStart(2, '0')
    },
    ontabtap(e) {
      let index = e.target.dataset.current || e.currentTarget.dataset.current
      this.switchTab(index)
    },
    ontabchange(e) {
      let index = e.target.current || e.detail.current
      this.switchTab(index)
    },
    switchTab(index) {
      if (this.list[index].content.length === 0) {
        this.getList(index)
      }

      if (this.tabIndex === index) {
        return
      }

      this.tabIndex = index
      this.scrollInto = this.tabBars[index].id
    },
    handleSelectPreselection(index) {
      this.preselectionStatusList = this.preselectionStatusList.map(
        (item, idx) => (idx !== index ? item : !item)
      )
      console.log(this.preselectionStatusList)
    },
    getCateList() {
      return new Promise((resolve, reject) => {
        getCaipiaoCategoryList().then(res => {
          if (res.code === 1 && res.data) {
            let resList = []
            resList = res.data.map(data => {
              return {
                id: data.c_id,
                name: data.c_name,
              }
            })
            // this.$set(this.cpCategoryList, 0, resList)
            // this.$set(this.cpCategoryList, 1, [
            //   { value: 50, name: '50期' },
            //   { value: 100, name: '100期' },
            //   { value: 200, name: '200期' },
            //   { value: 400, name: '400期' },
            //   { value: 1000, name: '1000期' },
            //   { value: 2000, name: '2000期' },
            //   // { value: 5000, name: '5000期' },
            // ])
            this.cpCategoryList2 = resList
            this.caipiao_id = this.cpCategoryList2[0].id
            this.qishu = 50
            resolve()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
            reject()
          }
        })
      })
    },
    onCateChange(e) {
      this.$set(this.cateChooseList, e.detail.column, e.detail.value)
      const caipiao_id = this.cpCategoryList[0][this.cateChooseList[0]].id
      const qishu = this.cpCategoryList[1][this.cateChooseList[1]].value
      this.requestData({
        caipiao_id,
        qishu,
      })

      this.caipiao_id = caipiao_id
      this.qishu = qishu
    },
    onCateChange2(e) {
      this.cateChooseList2 = e.detail.value
      const caipiao_id = this.cpCategoryList2[e.detail.value].id
      const qishu = 50

      this.requestData({
        caipiao_id,
        qishu,
      })

      this.caipiao_id = caipiao_id
      this.qishu = qishu
    },
  },
}
</script>

<style lang="scss" scoped>
.both-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.odd {
  background-color: #ffffff;
}
.even {
  background-color: #edf2f6;
}

.text-blue {
  font-size: 28upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(20, 158, 255, 1);
}

.text-gray {
  font-size: 28upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(159, 174, 184, 1);
}

.line-bottom {
  border-bottom: 2upx solid rgba(214, 224, 230, 1);
}

.line-h {
  height: 2upx;
  background-color: rgba(237, 242, 246, 1);
}

.tab-bar {
  padding: 0 10upx;
  .count-down {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30upx;
    display: flex;
    align-items: center;
    .icon {
      width: 32upx;
      height: 38upx;
      background-image: url(./image/time.png);
      background-size: 100% 100%;
      margin-right: 12upx;
    }
    .text {
      line-height: 38px;
    }
  }
  .uni-tab-item {
    /* #ifndef APP-PLUS */
    display: inline-block;
    /* #endif */
    flex-wrap: nowrap;
    padding-left: 30upx;
    padding-right: 30upx;
    position: relative;
  }

  .uni-tab-item-title {
    flex-wrap: nowrap;
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
    font-size: 28upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(113, 128, 138, 1);
    height: 80upx;
    line-height: 80upx;
  }

  .uni-tab-item-active {
    .uni-tab-item-title {
      color: rgba(20, 158, 255, 1);
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 28upx;
      height: 8upx;
      background-color: #149eff;
      border-radius: 8upx;
    }
  }
}

.tabs {
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background-color: #ffffff;
  /* #ifdef MP-ALIPAY || MP-BAIDU */
  height: 100vh;
  /* #endif */
}

.scroll-h {
  width: 100%;
  height: 80upx;
  display: flex;
  flex-direction: row;
  position: relative;
}

.swiper-box {
  height: calc(
    100vh - var(--status-bar-height) - 88upx - 80upx - var(--window-bottom)
  );

  .scroll-v {
    position: relative;
    // 有预选， - 选号行 - 号码分布行 - 期号行  - bottom
    height: calc(
      100vh - var(--status-bar-height) - 88upx - 80upx - 102upx -
        var(--window-bottom)
    );
  }

  &.has-pre-row {
    // 有预选， - 选号行 - 号码分布行 - 预选行 - bottom
    height: calc(
      100vh - var(--status-bar-height) - 88upx - 80upx - var(--window-bottom) -
        5px
    );

    .scroll-v {
      // 有预选， - 选号行 - 号码分布行 - 期号行 - 预选行 - bottom
      height: calc(
        100vh - var(--status-bar-height) - 88upx - 80upx - 102upx - 80upx -
          var(--window-bottom)
      );
    }
  }
}

.level-group {
  display: flex;
  &-item {
    flex: 1;
    display: flex;
    &:not(:last-child) {
      border-right: 2upx solid rgba(214, 224, 230, 1);
    }
    .trend-chart-clock {
      flex: 1;
    }
  }
}

.trend-chart {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .title-padding {
    background-color: #ffffff;
  }

  &-header {
    height: 88upx;
    padding: 0 28upx;
    border-bottom: 2upx solid rgba(237, 242, 246, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    .button {
      height: 60upx;
      line-height: 60upx;
      text-align: center;
      padding: 0 32upx;
      border-radius: 60upx;
      background-color: rgba(41, 153, 255, 1);

      font-size: 28upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    &-left {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &-right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      .button {
        margin-right: 30upx;
      }
      text {
        font-size: 28upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      .caipiao-name {
        margin-right: 20upx;
      }
      .qishu {
        margin-right: 20upx;
      }
      .text-container {
        flex: 1;
        text-align: right;
        .desc-container {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .picker-suffix-icon {
            display: inline-block;
            height: 28upx;
            margin-left: 22upx;
            line-height: 28upx;
            uni-image {
              width: 22upx;
              height: 28upx;
            }
          }
        }
      }
    }
  }

  &-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    &-header {
      display: flex;
      height: 102upx;

      &-left {
        width: 90upx;
        border-right: 2upx solid rgba(154, 169, 178, 1);
      }
      &-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        &-top {
          height: 52upx;
          background-color: #edf2f6;
        }
        &-bottom {
          flex: 1;
          display: flex;
          .trend-chart-clock {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24upx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }
        }
      }
    }

    &-scroll-region {
      // position: fixed;
      // top: calc(102upx + var(--status-bar-height));
      // bottom: 0;
      width: 100%;
      // height: auto;
      .scroll-region-item {
        display: flex;
        height: 60upx;
        &-left {
          width: 90upx;
          border-right: 2upx solid #9aa9b2;
          font-size: 28upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(159, 174, 184, 1);
        }
        &-right {
          flex: 1;
          display: flex;
          .trend-chart-clock {
            flex: 1;
            position: relative;
            .text {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate3d(-50%, -50%, 0);
              z-index: 2;
            }

            &.select {
              .text {
                color: #ffffff;
              }
              &::after {
                position: absolute;
                content: '';
                width: 48upx;
                height: 48upx;
                left: 50%;
                top: 50%;
                transform: translate3d(-50%, -50%, 0);

                z-index: 1;
                border-radius: 12upx;
              }

              &.h-hm {
                &::after {
                  background-color: #da2626;
                  border-radius: 50%;
                }
              }

              &.h-big {
                &::after {
                  background-color: #008ef2;
                }
              }
              &.h-lian {
                &::after {
                  background-color: #f59b00;
                }
              }
              &.h-odd {
                &::after {
                  background-color: #008ef2;
                }
              }
              &.h-composite {
                &::after {
                  background-color: #2cbd18;
                }
              }
            }
          }
        }
      }
    }
  }
}

.preselection-container {
  position: fixed;
  height: 80upx;
  bottom: var(--window-bottom);
  width: 100%;
  border-top: 2upx solid #9aa9b2;
  background-color: #ffffff;
  z-index: 10;
  padding: 0 16upx;
  display: flex;
  align-items: center;
  .text {
    font-size: 28upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-right: 24upx;
  }
  .circle-list {
    flex: 1;
    display: flex;
    justify-content: space-between;
    .circle {
      width: 48upx;
      height: 48upx;
      background-color: #edf2f6;
      color: #9faeb8;
      line-height: 48upx;
      text-align: center;
      font-size: 28upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      border-radius: 50%;
      &.selected {
        background-color: #149eff;
        color: #ffffff;
      }
    }
  }
}
.loading-more {
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  &-text {
    font-size: 28rpx;
    color: #999;
  }
}

.bottom-view {
  height: 1rpx;
  width: 100%;
  opacity: 0;
}

.no-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 40px;
  &-text {
    font-size: 15px;
    color: #666666;
  }
}
</style>
